<template>
  <el-drawer :title="$t('header.themeSettings')" v-model="drawerVisible" size="300px">
    <el-divider class="divider" content-position="center">
      {{ $t('header.componentSize') }}
    </el-divider>
    <el-select
      v-model="themeConfig.globalComponentSize"
      placeholder="small"
      @change="onComponentSizeChange"
    >
      <el-option
        label="large"
        value="large"
        :disabled="themeConfig.globalComponentSize === 'large'"
      />
      <el-option
        label="default"
        value="default"
        :disabled="themeConfig.globalComponentSize === 'default'"
      />
      <el-option
        label="small"
        value="small"
        :disabled="themeConfig.globalComponentSize === 'small'"
      />
    </el-select>
    <el-divider class="divider" content-position="center">
      {{ $t('header.theme') }}
    </el-divider>
    <div class="theme-item">
      <span>{{ $t('header.themeColor') }}</span>
      <el-color-picker
        v-model="themeConfig.primary"
        :predefine="colorList"
        @change="changePrimary"
      />
    </div>
    <div class="theme-item">
      <span>{{ $t('header.darkMode') }}</span>
      <SwitchDark />
    </div>
    <div class="theme-item">
      <span>{{ $t('header.greyMode') }}</span>
      <el-switch v-model="themeConfig.isGrey" @change="changeGreyOrWeak($event, 'grey')" />
    </div>
    <div class="theme-item">
      <span>{{ $t('header.weakMode') }}</span>
      <el-switch v-model="themeConfig.isWeak" @change="changeGreyOrWeak($event, 'weak')" />
    </div>
    <div class="theme-item">
      <span>{{ $t('header.openWatermark') }}</span>
      <el-switch
        v-model="themeConfig.isWartermark"
        size="small"
        @change="onWartermarkChange"
      ></el-switch>
    </div>
    <div class="theme-item">
      <span>{{ $t('header.watermarkText') }}</span>
      <el-input
        v-model="themeConfig.wartermarkText"
        size="default"
        style="width: 90px"
        @input="onWartermarkTextInput"
      ></el-input>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { GlobalStore } from '@/store/index'
import { DEFAULT_PRIMARY } from '@/config/config'
import SwitchDark from './SwitchDark.vue'
import mittBus from '@/utils/mittBus'
import Watermark from '@/utils/watermark'
import { useTheme } from '@/hooks/useTheme'
const { changePrimary, changeGreyOrWeak } = useTheme()
const globalStore = GlobalStore()
const themeConfig = computed(() => globalStore.themeConfig)
// 组件大小改变
const onComponentSizeChange = (size: 'large' | 'default' | 'small') => {
  themeConfig.value.globalComponentSize = size
  window.location.reload()
}
// 打开主题设置
const drawerVisible = ref(false)

// 预定义主题颜色
const colorList = [
  DEFAULT_PRIMARY,
  '#DAA96E',
  '#0C819F',
  '#722ed1',
  '#27ae60',
  '#ff5c93',
  '#e74c3c',
  '#fd726d',
  '#f39c12',
  '#9b59b6',
]

// 4、界面显示 --> 开启水印
const onWartermarkChange = () => {
  themeConfig.value.isWartermark ? Watermark.set(themeConfig.value.wartermarkText) : Watermark.del()
}
// 4、界面显示 --> 水印文案
const onWartermarkTextInput = (val: string) => {
  themeConfig.value.wartermarkText = val
  if (themeConfig.value.wartermarkText === '') return false
  if (themeConfig.value.isWartermark) Watermark.set(themeConfig.value.wartermarkText)
}
mittBus.on('openThemeDrawer', () => {
  drawerVisible.value = true
})
onMounted(() => {
  // 开启水印
  onWartermarkChange()
})
onBeforeUnmount(() => {
  mittBus.off('openThemeDrawer')
})
</script>
<style scoped lang="scss">
.theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0;
}
</style>
